<script setup>
import { onMounted, onUpdated, onUnmounted, ref, reactive, getCurrentInstance } from 'vue'
import _ from 'lodash'
import axios from 'axios';
import { ElMessage } from 'element-plus'

var currentTitle = ref("新建配置");
var dialogFormVisible = ref(false);
var dataList = ref([]);
var currentPage = ref(1);
var totalCount = ref(0);

const formData = reactive({
    category: '',
    key: '',
    value: '',
})

onMounted(() => {
    loadList();
})


function handleCurrentChange(row) {
    console.log(row);
    currentPage.value = row;
    loadList();
}

async function loadList() {
    var ret = await axios.get('/api/dictionary', {
        params: {
            pageIndex: 1,
            pageSize: 10
        }
    });
    if (ret.data.code == 0) {
        dataList.value.length = 0;
        console.log(ret.data);
        totalCount.value=ret.data.data.total;
        _(ret.data.data.items).forEach((v) => {
            dataList.value.push(v);
        })
    }
}

function handleCreate() {
    currentTitle.value = "新建配置";
    dialogFormVisible.value = true;
}

function handleEdit(index, row) {

}

async function handleDelete(index,row){
    var ret = await axios.delete('/api/dictionary/' + row.id);
    if (ret.data.code == 0) {
        loadList();
    }
    else {
        ElMessage({
            message: ret.data.data,
            type: 'error',
        })
    }
}

async function createDictionary(index,row){
    if (formData.category === "") {
        ElMessage({
            message: 'Category不能空',
            type: 'warning',
        })
        return;
    }
    if (formData.key === "") {
        ElMessage({
            message: 'Key不能空',
            type: 'warning',
        })
        return;
    }

    if (formData.value === "") {
        ElMessage({
            message: 'Value不能空',
            type: 'warning',
        })
        return;
    }

    var ret = await axios.post('/api/dictionary', formData);
    if (ret.data.code == 0) {
        loadList();
        dialogFormVisible.value = false;
    }
    else {
        ElMessage({
            message: ret.data.message,
            type: 'error',
        })
    }
}

</script>

<template>
    <el-page-header title="配置信息" icon="">
        <template #extra>
            <div>
                <el-button type="primary" @click="handleCreate" class="ml-2"><el-icon>
                        <CirclePlus />
                    </el-icon>新建配置</el-button>
            </div>
        </template>
        <div>
            <el-table class="tableClass" :data="dataList" style="width: 100%" :default-expand-all="true" border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :row-style="{ height: '50px' }">
                <el-table-column type="index" width="45"></el-table-column>
                <el-table-column prop="id" label="Id" width="auto"> </el-table-column>
                <!-- <el-table-column prop="pid" label="Pid" width="150"> </el-table-column> -->
                <el-table-column prop="category" label="类别" width="auto"> </el-table-column>
                <el-table-column prop="key" label="项" width="auto"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
                <el-table-column label="操作" width="110">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
                            <el-icon>
                                <Edit />
                            </el-icon>
                        </el-button>
                        <el-popconfirm width="220" @confirm="handleDelete(scope.$index, scope.row)" confirm-button-text="确定" cancel-button-text="取消"
                            icon-color="#626AEF" title="确定删除此配置?">
                            <template #reference>
                                <el-button size="small" type="danger" >
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :page-size="12" :current-page="currentPage" layout="->,total, prev, pager, next" :total="totalCount"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <el-dialog v-model="dialogFormVisible" :title="currentTitle" width="500">
                <el-form :model="formData">
                    <el-form-item label="分类" label-width="90">
                        <el-input v-model="formData.category" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="项" label-width="90">
                        <el-input v-model="formData.key" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="值" label-width="90">
                        <el-input v-model="formData.value" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="createDictionary">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
    </el-page-header>
</template>


<style scoped></style>